<template>
  <div style="background-color: #f5f6f7; width: 958px">
    <div class="report-edit-news-frame" >
      <el-form :model="addForm" :rules="rules" ref="addForm"  class="report-edit-news-inputForm">
        <el-form-item label="报告名称" prop="title" class="el-form-item">
          <el-input v-model="addForm.title" placeholder="输入报告名称" maxlength="25" clearable></el-input>
        </el-form-item>
        <el-form-item label="报告类别" prop="subType" class="el-form-item-right">
          <el-select class="report-edit-news-selector" v-model="addForm.subType" clearable filterable placeholder="选择报告类别">
            <el-option v-for="item in subTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime" class="el-form-item">
          <!-- 强制换行 -->
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-date-picker type="datetime" size="medium" align="left" v-model="addForm.publishTime" clearable
                          format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"  placeholder="选择发布时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <select-file :headTitle="'选择文件'" :fileUrlsArray="this.imageFiles" :headSonTitle="'仅支持pdf（最多选择1个文件）'"
                @getFileUrls="getFileUrls"></select-file>
    </div>
    <el-row class="report-edit-news-btnFrame">
      <el-button class="report-edit-news-btn" @click="submitForm('addForm')" type="primary">上传</el-button>
    </el-row>
  </div>
</template>
<script>
  import {validateTips} from 'utils/tips';
  import SelectFile from './selectFile.vue';
  export default {
    components: {
      SelectFile
    },
    props: ['reportInfo'],
    data() {
      return {
        addForm: JSON.parse(JSON.stringify(this.reportInfo)),
        imageFiles: [],
        rules: {
          title: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'},
            {min: 0, max: 25, message: validateTips.LESS_25, trigger: 'blur'}
          ],
          subType: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ],
          publishTime: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ]
        },
        subTypeOption: [
          {
            value: 21,
            label: '价格周报'
          }, {
            value: 22,
            label: '市场月报'
          }, {
            value: 23,
            label: '季度报告'
          }, {
            value: 24,
            label: '年报'
          }, {
            value: 25,
            label: '分析报告'
          }
        ]
      };
    },
    created() {
      this.addForm = JSON.parse(JSON.stringify(this.reportInfo));
    },
    methods: {
      getFileUrls(titleImg, fileNameArr, fileUrlArr) {
        this.imageFiles = [];
        for (let i = 0; i < fileUrlArr.length; i++) {
          let singleImg = {name: '', url: ''};
          singleImg.name = fileNameArr[i];
          singleImg.url = fileUrlArr[i];
          this.imageFiles.push(singleImg);
        }
      },
      // 点击提交按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.commitForm();
          } else {
            return false;
          }
        });
      },
      // 请求后端接口
      commitForm() {
        // 判断是否上传文件
        if (this.imageFiles.length === 0) {
          this.errorTip('请添加文件');
          return;
        }
        var that = this;
        this.ajax({
          type: 'POST',
          url: '/malisk/server/news/saveNewsReport',
          data: {
            id: that.addForm.id,
            version: that.addForm.version,
            mainType: 2,
            subType: that.addForm.subType,
            title: that.addForm.title,
            fileUrl: this.imageFiles[0].url,
            publishTime: that.addForm.publishTime + ':00'
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.successTip('上传成功', 2000);
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    }
  };
</script>
<style>
  .report-edit-news-frame {
    display: flex;
    flex-wrap: wrap;
    width: 958px;
    height: 430px;
    border: 1px solid #e5e5e5;
    background-color: white
  }
  .report-edit-news-frame .el-form-item {
    display: inline-block;
    width: 420px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .report-edit-news-frame .el-form-item-right {
    float: right;
  }
  .report-edit-news-inputForm {
    margin-top:10px;
  }
  .report-edit-news-btnFrame {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
  }
  .report-edit-news-btn {
    width: 140px;
    height: 40px;
  }
  .report-edit-news-selector {
    width: 420px;
  }
  .report-edit-news-frame .news-add-report-file-frame .el-form .el-upload-list--picture-card li.is-success{
    position:relative;
    font-family: "maliiconfont" !important;
  }
  .report-edit-news-frame .news-add-report-file-frame .el-form .el-upload-list--picture-card li.is-success:before{
    content: "\e614";
    font-size:40px;
    position:absolute;
    left:48px;
    top:34px;
  }
  .report-edit-news-frame .news-add-report-file-frame .el-form .el-upload-list--picture-card li.is-success img{
    display:none;
  }
</style>
